<template>
	<div class="ui-select-image" @mouseover="hover = true" @mouseout="hover = false" @click="handleClick">
		<img v-if="src" :src="src" />
		<div class="mask" v-show="hover || !src">
			<Icon type="ios-camera" />
		</div>
	</div>
</template>

<script>
export default {
	name: '',
	props: {
		src: String
	},
	data() {
		return {
			hover: false
		}
	},
	methods: {
		handleClick() {
			this.$emit('click');
		}
	}
}
</script>

<style>
.ui-select-image {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 52px;
	border: 1px dashed #e0e1e4;
	border-radius: 5px;
	text-align: center;
	line-height: 50px;
	font-size: 0;
	background-color: #fafafa;
	vertical-align: top;
	overflow: hidden;
	cursor: pointer;
}
.ui-select-image img {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
	z-index: 1;
}
.ui-select-image .mask {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 24px;
	color: #cacfd2;
	background-color: rgba(250, 250, 250, .9);
	z-index: 2;
}
.ui-select-image + .ui-select-image {
	margin-left: 10px;
}
</style>